Lab 5 - Component State Challenge

Intro

In this lab you will be applying what we have learned about state to enhance the song list components we wrote earlier in the course.

Pre-requisites

You should have a running "hello world" application with a song list component.

Challenge requirements

1. In the song list component, set up a button with the text "show songs".

2. In the song list component, set the UL to have a style of "display: none;". This means that by default the ul will not be visible on screen.

3. When the show songs button is clicked then the UL should be shown (change its display property to "block"), and the button's text should change to "hide songs". The button should then act as a toggle to show or hide the songs - each time it is clicked it should set the UL's style to either "block" or "hide" and change the text on the button appropriately.

End of section code

Your instructor will show you where to find the sample solution to this challenge.